Geography 485L/585L - Introductions & Course Outline

Introductions

We will be working on answering these questions during the first class collaboratory from 5:00-6:15 on Wednesday

Syllabus

Outline

Instructor

Karl Benedict

Director, Earth Data Analysis Center

Research Asst. Professor. University Libraries, Geography Dept.

kbene@edac.unm.edu

Office: Bandelier West, rm. 107

(505) 277-3622 x234

Description & Objectives

Class Format

Class Readings

HTML Manual of Style: A Clear, Concise Reference for Hypertext Markup Language (including HTML5), Fourth Edition (4th Edition). Larry Aronson. Addison-Wesley Professional. 2010.

Beginning Google Maps API 3. Gabriel Svennerberg. Apress. 2010.

OpenLayers 2.10 Beginner's Guide. Erik Hazzard. Packt Publishing. 2011.

Optional

Designing with Web Standards (3rd Edition). Jeffrey Zeldman & Ethan Marcotte. New Riders Press. 2009.

Evaluation and Grading

Class Grade =

Evaluation and Grading

13 Weekly Portfolio Milestones - 40 points at mid-term review, 40 points at final review

4 "Deep Dive" Assignments

Evaluation and Grading

2 Exams

Evaluation and Grading

Class Topics

Basics

Outline

What is Internet Mapping

Extended Desktop Mapping

Use of open standards based remote data and map services in desktop applications

Geospatial Data Sharing

Establishing open standards based services to share geospatial data and mapping capabilities over the Internet

Web-client Mapping

The delivery of mapping and geospatial data tools through web browsers, again based upon open standards

Definitions

Internet

The global computer network of computers that typically connect with each other over TCP/IP

World Wide Web

The subset of applications that are run over the Internet, typically using the HTTP protocol in combination with data (HTML, XML, XHTML), presentation (CSS), and behavior (JavaScript) components

Mapping

The generation of cartographic products that include map images (pictures of geospatial data) and other elements (e.g. legends, tools, scale information, north-arrow)

Definitions

Analysis

The development of models (statistical and otherwise) that enable the exploration of geospatial data and testing of hypotheses using those data

Open Standards

While the definition varies from one organization to the next, Open Standards are often characterized by the following:

Definitions

Interoperability

Ability of systems to share data and information with each other

COTS

Commercial Off-the-Shelf Software. Applications that are “purchased” from vendors, often with license terms that restrict the use the software to the specific platform for which it is licensed. Often comes with implicit or explicit technical support

Open Source

Software licensed under terms that are consistent with the Open Source definition, which includes access to source code, and freedom to modify and redistribute

Definitions

Data

Actual values associated with geographic locations. For example - numeric elevation values associated with locations within a Digital Elevation Model.

Metadata

Data about a particular data product or service. Metadata provide critical documentation that supports the discovery and use of data products and data and mapping services

Tools

Server Platform

Linux server with GeoServer, Apache, GDAL and Proj libraries

Operating System (one of the following)

Microsoft Windows Vista or 7

Mac OS 10.6 or above

Linux (speak to Dr. Benedict)

Geographic Information System (GIS)

Quantum GIS (platform specific download)

ArcGIS 10 (optional - request free student version installation CD from Dr. Benedict - Windows Only)

Tools

Geographic Data Processing/Analysis (one of the following)

FWTools (Windows & Linux - free download)

GDAL and related frameworks (Mac - the current "GDAL Complete" convenience package available here)

Text Editor

Notepad (Windows - included with operating system)

Notapad++ (Windows - free download)

TextEdit (Mac - included with operating system)

TextWrangler (Mac - free download)

Tools

Secure File Transfer Protocol Client

WinSCP (Windows - free download)

Fugu (Mac - free download)

Secure Shell (SSH) Client

PuTTY (Windows - free download)

Terminal (Mac - included with operating system)

Web Browser (at least one of the following)

Firefox (All Operating Systems - free download)

Chrome (All Operating Systems - free download)

Communication

This is the first iteration with the class as a hybrid course, so the most productive communication model will evolve over the semester, but I commit to the following:

I also strongly encourage that questions be submitted through the discussion board so that other students can both learn from and contribute to the answers provided.

Creative Commons License
This work by Karl Benedict is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Module 2.1 - Introduction to HTML, CSS, and Javascript

Overview

Web Development

Parts of a Web Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
    <!-- The HTML block is the container for all of your page content -->
    <head>
        <!-- The head is where you include pointers to external resources 
        (i.e. style sheets and javascript files), blocks of Javascript code
        , styles, etc.  -->
        <title>The page title also goes in here</title>
    </head>
    <body>
        <!-- The body is where you put all of the content for the page 
        (i.e. the material that will be displayed in the web browser)  -->
        <h1>Headers</h1>
        <div>Generic blocks of content</div>
        <p>Paragraphs</p>
        <table>Tables</table>
        <img ...>Images</img>
        <form ...>Forms</form>
        <ul>Unordered Lists</ul>
        <ol>Ordered Lists</ol>
        <li>List Items</li>
    </body>
</html>

Web Site Components - Structure

Content is defined in terms of the structural elements available in HTML/XHTML

Web Site Components - Presentation

Modifications to default rendering of HTML/XHTML elements are made through styles defined in CSS

CSS Selectors

Selectors may be based on several criteria

Web Site Components - Behavior

The most interoperable language for adding dynamic behavior to web sites is Javascript - supported by most browsers on most operating systems

Simple Web Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page</title>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
    </body>
</html>

link to example

Simple Web Page with CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page - with styling</title>
        <style type="text/css">
            h1 {color:blue; font-size:large}
            p.para {color:#777777; font-size:small}
            #annoying {color:red; text-decoration:line-through}
        </style>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p class="para">OK, not much simpler than this.</p>
        <p id="annoying" class="para">Hello World?</p>
    </body>
</html>

link to example

Simple Web Page with Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page with Javascript</title>
        <script type="text/javascript">
            function genericAlert() {
                alert("You just did something ...")
                document.getElementById("clickMe").style.color = "red"
            }
        </script>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
        <p id="clickMe" onclick="genericAlert();">What happens when you click me?</p>
    </body>
</html>

link to example

More Complete Web Page Example

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

Creative Commons License
This work by Karl Benedict is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Module 2.2 - Web-based Mapping Clients: Google Maps API - Part 1

Outline

What is an API

An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. -- From Wikipedia: http://en.wikipedia.org/wiki/Api

Google Maps API Version

Reference Information

Google Maps API Family

http://code.google.com/apis/maps/

Javascript API Home Page

http://code.google.com/apis/maps/documentation/javascript/

Javascript Basics Entry Page

http://code.google.com/apis/maps/documentation/javascript/basics.html

Javascript API v3 Tutorial Page

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Key Components

Types (required)

ROADMAP

SATELLITE

HYBRID

TERRAIN

Latitude and Longitude (required)

specification of where the map should initially be centered

Zoom Level (required)

0=global, higher values increasingly local. Limited by map type

Controls

Overlays

Overlay Types documentation

Marker

points depicted by specified or defined icons at locations within the map

Polyline

linear features defined by multiple points with a defined style for the line

Polygon

closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified.

(Ground) Overlay Maps

Image-based map layers that replace or overlay Google layers - registered to the map coordinates

Overlays (continued)

Info Windows

floating content windows for displaying content defined as HTML, a DOM element, or text string

Layers

Grouped display content assigned to a specific layer: KmlLayer, FusionTablesLayer, TrafficLayer, BicyclingLayer

Custom Overlays

definition of programmatically controlled layers

Services

Services

Events

Examples

Simple - Roadmap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; 
                margin: 0px; 
                padding: 0px; 
                background-color: black; 
                color: #CCCCCC;
                text-align: center}
            #map_canvas { width:90%; 
                height:80%; 
                margin-left:auto; 
                margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
                zoom: 8,
                center: classroom,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
            }
        </script>
    </head>

    <body onload="initialize()">
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>
    </body>
</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps01.html

Simple - Satellite

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; 
                margin: 0px; 
                padding: 0px; 
                background-color: black; 
                color: #CCCCCC;
                text-align: center}
            #map_canvas { width:90%; 
                height:80%; 
                margin-left: auto; 
                margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var classroom = new google.maps.LatLng(35.084280,-106.624073)
                var myOptions = {
                    zoom: 8,
                    center: classroom,
                    mapTypeId: google.maps.MapTypeId.SATELLITE
                };
                var map = new google.maps.Map(
                    document.getElementById("map_canvas"), 
                    myOptions);
            }
        </script>
    </head>
    
    <body onload="initialize()">
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>
    </body>
</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps02.html

Simple - Hybrid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 8,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps03.html

Simple - Terrain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 8,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps04.html

Simple - Hybrid - Zoomed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps05.html

Simple - Zoomed - Modified Controls

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID,
              zoomControl: true,
              zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
              mapTypeControl: true,
              mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
              streetViewControl: false
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>

    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps06.html

Markers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
            
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
            
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps07.html

Polyline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: 
            auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
        
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
        
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
        
            var officeVisitCoordinates = [
              office,
              new google.maps.LatLng(35.084445,-106.624327),
              new google.maps.LatLng(35.084309,-106.624308),
              classroom
              ];
            var officePath = new google.maps.Polyline({
              path: officeVisitCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            });
            officePath.setMap(map)
          }
        </script>
    </head>

    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps08.html

Polygon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
            var buildingCoordinates = [
              new google.maps.LatLng(35.084498,-106.624921),
              new google.maps.LatLng(35.084558,-106.624911),
              new google.maps.LatLng(35.084566,-106.624970),
              new google.maps.LatLng(35.084609,-106.624966),
              new google.maps.LatLng(35.084544,-106.624383),
              new google.maps.LatLng(35.084438,-106.624317),
              new google.maps.LatLng(35.084384,-106.623922),
              new google.maps.LatLng(35.084164,-106.623970),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084391,-106.624284)
              ];
            var bldgPoly = new google.maps.Polygon({
              paths: buildingCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35
            });
            bldgPoly.setMap(map)
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps09.html

Adding an Info Window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
          .infoBox { color:black }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
            var buildingCoordinates = [
              new google.maps.LatLng(35.084498,-106.624921),
              new google.maps.LatLng(35.084558,-106.624911),
              new google.maps.LatLng(35.084566,-106.624970),
              new google.maps.LatLng(35.084609,-106.624966),
              new google.maps.LatLng(35.084544,-106.624383),
              new google.maps.LatLng(35.084438,-106.624317),
              new google.maps.LatLng(35.084384,-106.623922),
              new google.maps.LatLng(35.084164,-106.623970),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084391,-106.624284)
              ];
            var bldgPoly = new google.maps.Polygon({
              paths: buildingCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35
            });
            bldgPoly.setMap(map);
            var classInfoContent = '<div class="infoBox">' +
              '<p>This is the location for the Geography 485L/585L class</p>' +
              '</div>'
            var classInfoWindow = new google.maps.InfoWindow({
              content: classInfoContent
              });
            google.maps.event.addListener(classroomMarker, 'click', function() {
              classInfoWindow.open(map,classroomMarker);
              });
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps10.html

Module 2.2 - Web-based Mapping Clients: Google Maps API - Part II - Related Topics

Overview

Getting Started with Styled Maps - Video

Styled Maps Documentation | Styled Maps Wizard

Google Maps Styled Maps Wizard link

Google Maps Styled Maps Wizard link

Map Example: Simple - Styled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
    color: #CCCCCC;
    text-align: center}
  #map_canvas { width:90%; 
    height:80%; 
    margin-left: 
    auto; 
    margin-right: auto }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var myOptions = {
      zoom: 8,
      center: classroom,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
              {
                featureType: "water",
                stylers: [
                  { visibility: "on" },
                  { hue: "#0008ff" }
                ]
              },{
                featureType: "road.highway",
                stylers: [
                  { hue: "#ff1a00" }
                ]
              },{
                featureType: "road.arterial",
                stylers: [
                  { hue: "#ffa200" },
                  { visibility: "simplified" }
                ]
              },{
                featureType: "road.local",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "administrative",
                stylers: [
                  { visibility: "simplified" }
                ]
              },{
                featureType: "poi",
                stylers: [
                  { visibility: "on" },
                  { hue: "#00ffff" }
                ]
              },{
                featureType: "poi",
                stylers: [
                  { visibility: "on" }
                ]
              }
            ]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
</script>
</head>

<body onload="initialize()">
  <h1>Sample Map - Styled (POIs Emphasized)</h1>
  <div id="map_canvas"></div>
</body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/gmaps_styled.html

Google I/O 2011: Managing and visualizing your geospatial data with Fusion Tables - Video

Some particularly relevant sections: Introduction (0:00 - 10:30) | Google Maps API Integration (21:40 - 34:42) | Summary and Links (52:00 52:40)

Fusion Tables Documentation/Help

Google Fusion Tables Introduction Video link

Google Fusion Tables Introduction Video link

Bringing It All Together

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>Karl's Event Diary</title>
        <link rel="stylesheet" href="./styles/base.css" media="screen">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="./js/base.js"></script>
        <script type="text/javascript">
            // Define a set of global coordinates for use throughout the web site
            // Place coordinates derived from GNIS database: http://geonames.usgs.gov/pls/gnispublic
            var eventPlaces = [
                {
                    name: "Albuquerque", 
                    point: new google.maps.LatLng(35.0889356,-106.5747462),
                    label: "Albuquerque: Duke City Half Marathon"
                }, 
                {
                    name: "Durango", 
                    point: new google.maps.LatLng(37.2752800,-107.8800667),
                    label: "Durango: Animas Valley/Steamworks Half Marathon"
                },
                {
                    name: "San Diego", 
                    point: new google.maps.LatLng(32.7153292,-117.1572551),
                    label: "San Diego: San Diego Rock 'n' Roll Marathon"
                },
                {
                    name: "San Francisco", 
                    point: new google.maps.LatLng(37.7749295,-122.4194155),
                    label: "San Francisco: Nike Women's Marathon"
                },
                {
                    name: "Orlando", 
                    point: new google.maps.LatLng(28.5383355,-81.3792365),
                    label: "Orlando: Walt Disney World half- and full-marathon"
                },
                {
                    name: "Anaheim", 
                    point: new google.maps.LatLng(33.8352932,-117.9145036),
                    label: "Anaheim: Disneyland Half Marathon"
                }
            ]
        </script>
    </head>
    
    <body onload="initialize()">
        <h1>
            My diary of endurance events that I've participated in since joining Team in Training
        </h1>
        
        <p>In 2008 Cynthia and I joined the Leukemia and Lymphoma Society's (<a href="http://www.lls.org/">LLS</a>) Team in Training (<a href="http://www.teamintraining.org/">TNT</a>, <a href="http://youtu.be/GMSKG8L6K78">info video</a>) program as 
        participants to train for the Animas Valley/Steamworks Half Marathon and raise money for blood cancer
        research and patient services. In spite of our not having any direct connection to blood cancer (at that time), 
        we found the goals of LLS admirable,  the combined training and fund-raising program of TNT a great idea, and have made many
        new friends over the many seasons that we've been involved with TNT.</p>
        
        <p>Since 2008 we have continued to volunteer with TNT, as participants, mentors, and since 2010 I have been a coach 
        (check out my <a href="http://youtu.be/GMSKG8L6K78#t=2m13s">half-second</a> of fame in the info video)
        for TNT with an emphasis on training walkers for full- or half-marathons. This page provides a summary of the 
        events that I've participated in in some capacity since we became involved with TNT. </p>
        
        <div id="event-map" name="event-map"></div>


        <h2>
            <span class="date">9/1/2013</span> 
            Disneyland Half Marathon 
            <span class="time">2:56:57</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">approx. map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/13/2013</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:46:57</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">approx. map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/12/2013</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">3:22:48</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">approx. map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>
    
        <h2>
            <span class="date">9/29/2012</span> 
            Hot Chocolate 15k 
            <span class="time">1:56:46</span> 
            (no map available)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/9/2012</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/9/2012</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:56:28</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/8/2011</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">3:29:00</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/19/2010</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/6/2010</span> 
            San Diego Rock 'n' Roll Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[2].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">10/18/09</span> 
            Nike Women's Marathon 
            <span class="time">7:13:05</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[3].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">9/6/2009</span> 
            Disneyland Half Marathon 
            <span class="time">3:43:05</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/11/2009</span> 
            Disney World Marathon 
            <span class="time">6:57:42</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">10/19/2008</span> 
            Duke City Half Marathon 
            <span class="time">3:09:42</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[0].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/21/2008</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">3:14:52</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

    </body>

</html>

http://karlbenedict.com/GEOG485-585/lectures/examples/tnt/index.html

Module 2.3 - Web-based Mapping Clients: OpenLayers Javascript Framework - Part I

Outline

OpenLayers Capabilities

Distinguishing Characteristics Between OpenLayers and Google Maps

Resources

OpenLayers Home Page

Application Programming Interface (API) Reference

Examples

Demonstrations and Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">        
        // define global variables
        var lon = -106.5;
        var lat = 36;
        var zoom = 3;
        var map;
        var layer;

        // =============== Initialization function ===================
        function init(){
            map = new OpenLayers.Map( 'map' );
            
            // =========== OSM Map ====================
            layer = new OpenLayers.Layer.OSM( "Open Street Map");
            map.addLayer(layer);
            
            map.setCenter(
                new OpenLayers.LonLat(lon, lat).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), zoom
            );                
        }
        // =============== End of Initialization Function ============
        
    </script>
    <style type="text/css">
        #map {width:90%; height:500px}
    </style>
  </head>
  <body onload="init()">
    <h1>Basic OpenLayers Map</h1>
    <p>Shows the basic use of OpenLayers with the <a href="http://www.openstreetmap.org/">OpenStreetmap</a> basemap</p> 
    <!-- Map DIV -->
    <div id="map"></div>    
  </body>
</html>

Demonstration and Examples - Online Resources

Next Week - Custom Features and WMS Layers

Module 2.3 - Web-based Mapping Clients: OpenLayers Javascript Framework - Part II

Outline

Map Object Options

Map Object Options API Reference

Two methods for constructing a new OpenLayers.Map object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    // create a map with default options in an element with the id "map1"
    var map = new OpenLayers.Map("map1");
    
    // create a map with non-default options in an element with id "map2"
    var options = {
        maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
        maxResolution: 156543,
        units: 'm',
        projection: "EPSG:41001"
    };
    var map = new OpenLayers.Map("map2", options);
    
    // map with non-default options - same as above but with a single argument
    var map = new OpenLayers.Map({
        div: "map_id",
        maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
        maxResolution: 156543,
        units: 'm',
        projection: "EPSG:41001"
    });

Map Object Options - continued

Excerpts from the API documentation

allOverlays

{Boolean} Allow the map to function with “overlays” only. Defaults to false. If true, the lowest layer in the draw order will act as the base layer. In addition, if set to true, all layers will have isBaseLayer set to false when they are added to the map.

div

{DOMElement|String} The element that contains the map (or an id for that element). If the OpenLayers.Map constructor is called with two arguments, this should be provided as the first argument. Alternatively, the map constructor can be called with the options object as the only argument. In this case (one argument), a div property may or may not be provided. If the div property is not provided, the map can be rendered to a container later using the render method.

Map Object Options - continued

layers

{Array(OpenLayers.Layer)} Ordered list of layers in the map

tileSize

{OpenLayers.Size} Set in the map options to override the default tile size for this map.

projection

{String} Set in the map options to override the default projection string this map - also set maxExtent, maxResolution, and units if appropriate. Default is "EPSG:4326".

units

{String} The map units. Defaults to 'degrees'. Possible values are 'degrees' (or 'dd'), 'm', 'ft', 'km', 'mi', 'inches'.

Map Object Options - continued

resolutions

{Array(Float)} A list of map resolutions (map units per pixel) in descending order. If this is not set in the layer constructor, it will be set based on other resolution related properties (maxExtent, maxResolution, maxScale, etc.).

maxResolution

{Float} Default max is 360 deg / 256 px, which corresponds to zoom level 0 on gmaps. Specify a different value in the map options if you are not using a geographic projection and displaying the whole world.

minResolution

{Float}

maxScale

{Float}

minScale

{Float}

Map Object Options - continued

maxExtent

{OpenLayers.Bounds} The maximum extent for the map. Defaults to the whole world in decimal degrees (-180, -90, 180, 90). Specify a different extent in the map options if you are not using a geographic projection and displaying the whole world.

minExtent

{OpenLayers.Bounds}

restrictedExtent

{OpenLayers.Bounds} Limit map navigation to this extent where possible. If a non-null restrictedExtent is set, panning will be restricted to the given bounds. In addition, zooming to a resolution that displays more than the restricted extent will center the map on the restricted extent. If you wish to limit the zoom level or resolution, use maxResolution.

numZoomLevels

{Integer} Number of zoom levels for the map. Defaults to 16. Set a different value in the map options if needed.

Layer Object Options

Layer Object Options API Reference

Common Pattern of Layer Object Creation (varies some depending upon the specific layer type)

1
2
3
4
5
6

    new OpenLayers.Layer.*** (
        'layer name',
        'layer URL',
        {server-related options}, 
        {OpenLayers Layer Object options}
    )

Layer Object Options - continued

id

{String}

name

{String}

isBaseLayer

{Boolean} Whether or not the layer is a base layer. This should be set individually by all subclasses. Default is false

displayInLayerSwitcher

{Boolean} Display the layer’s name in the layer switcher. Default is true.

visibility

{Boolean} The layer should be displayed in the map. Default is true.

Layer Object Options - continued

attribution

{String} Attribution string, displayed when an OpenLayers.Control.Attribution has been added to the map.

projection

{OpenLayers.Projection} or {String} Set in the layer options to override the default projection string this layer - also set maxExtent, maxResolution, and units if appropriate. Can be either a string or an OpenLayers.Projection object when created -- will be converted to an object when setMap is called if a string is passed.

units

{String} The layer map units. Defaults to 'degrees'. Possible values are 'degrees'’ (or 'dd'), 'm', 'ft', 'km', 'mi', 'inches'.

scales

{Array} An array of map scales in descending order. The values in the array correspond to the map scale denominator. Note that these values only make sense if the display (monitor) resolution of the client is correctly guessed by whomever is configuring the application. In addition, the units property must also be set. Use resolutions instead wherever possible.

Layer Object Options - continued

resolutions

{Array} A list of map resolutions (map units per pixel) in descending order. If this is not set in the layer constructor, it will be set based on other resolution related properties (maxExtent, maxResolution, maxScale, etc.).

maxExtent

{OpenLayers.Bounds} The center of these bounds will not stray outside of the viewport extent during panning. In addition, if displayOutsideMaxExtent is set to false, data will not be requested that falls completely outside of these bounds.

minExtent

{OpenLayers.Bounds}

maxResolution

{Float} Default max is 360 deg / 256 px, which corresponds to zoom level 0 on gmaps. Specify a different value in the layer options if you are not using a geographic projection and displaying the whole world.

minResolution

{Float}

Layer Object Options - continued

numZoomLevels

{Integer}

minScale

{Float}

maxScale

{Float}

displayOutsideMaxExtent

{Boolean} Request map tiles that are completely outside of the max extent for this layer. Defaults to false.

transitionEffect

{String} The transition effect to use when the map is panned or zoomed.

There are currently two supported values

null No transition effect (the default).

resize Existing tiles are resized on zoom to provide a visual effect of the zoom having taken place immediately. As the new tiles become available, they are drawn over top of the resized tiles.

Additional Map and Layer Object Functions & Events

Both Map and Layer Objects have a number of associated functions as well

WMS Layer Configuration

Some key issues to be aware of when using the WMS Layer Class:

Sample WMS Layer Object Creation

1
2
3
4
5
6
7

    countiesLayer = new OpenLayers.Layer.WMS( 
        "US Counties", 
        "http://webservices.nationalatlas.gov/wms?",
        {layers: "counties", version: '1.3.0', transparent: 'TRUE'},
        {isBaseLayer: false, visibility: false, opacity: .8}
    );
    map.addLayer(countiesLayer);

Example

Vector Layer Configuration

Vector layers support

Vector Layer Configuration - Continued

Vector Layer Objects are Typically Defined using three OpenLayers classes

Protocol

Connection protocol for requesting the data that would be provided from an external source

Format

The OpenLayers supported format of the vector data object

Strategy

A specification of how OpenLayers should request the data from the server, and also handle the data within the client (browser).

Vector Layer Configuration - Continued

Sample Point Feature Object creation

1
2
3

    var Coord_classroom = new OpenLayers.Geometry.Point(-106.624073,35.084280);
    var Point_classroom = new OpenLayers.Feature.Vector(Coord_classroom);
    Layers["localFeatures"].addFeatures([Point_classroom])

Sample KML Layer Object creation

1
2
3
4
5
6
7
8
9
10
11

    Layers.counties = new OpenLayers.Layer.Vector("KML - Counties", {
        projection: map.displayProjection,
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "NMCounties.kml",
            format: new OpenLayers.Format.KML({
                extractAttributes: true
            })
        })
    });
    map.addLayer(Layers.counties)

Example # Module 3 - GIS and Services Oriented Architectures #

Outline

Geographic Information Systems

Data Types - Vector

For example, a census vector data product might include the geometries that define census tracts and attributes associated with each geometry: population, income, etc.

Data Types - Raster

Accessing and Processing Raster and Vector Data

OGR

vector data access and information

GDAL

raster data access and information

These libraries are the data access and processing foundation for a growing number of open source and commercial mapping systems

Information and documentation: GDAL Home Page | OGR Home Page

Coordinate Systems/Projections

EPSG Codes

Projection Parameters

The parameters that define a map projection may be looked up in a number of online locations:

EPSG registry (helpful if you already know the EPSG code of the projection you are looking for)

http://www.epsg-registry.org/

GeoTIFF Projection List (helpful if you know the name of one of the broadly used projections - uneven performance of links)

http://www.remotesensing.org/geotiff/proj_list/

SpatialReference.org (decent search tool, includes non-EPSG as well as EPSG projection information, multiple descriptions of projection parameters)

http://spatialreference.org/

Coordinate Transformation Calculations

When the projection parameters are in hand, the Proj4 library (http://trac.osgeo.org/proj/) and related utilities (cs2cs and proj) can be used to perform coordinate transformation calculations. cs2cs is my recommended utility for coordinate conversion because of the explicit definition of both source and destination coordinate reference system.

Coordinate Transformation Calculations - Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

KB:~ kbene$ cs2cs +proj=longlat +ellps=WGS84 +datum=WGS84 +to +proj=utm +zone=13 +ellps=GRS80 +datum=NAD83 +units=m
106.75W 35N
340301.04   3874442.20 0.00
^C

KB:~ kbene$ cs2cs +init="EPSG:4326" +to +init="EPSG:26913"
106.75W 35N
340301.04   3874442.20 0.00
^C

KB:~ kbene$ cs2cs +proj=utm +zone=13 +ellps=GRS80 +datum=NAD83 +units=m +to +proj=longlat +ellps=WGS84 +datum=WGS84
340301.04   3874442.20
106d45'W    35dN 0.000
^C

KB:~ kbene$ cs2cs +init="EPSG:26913" +to +init="EPSG:4326"
340301.04   3874442.20
106d45'W    35dN 0.000
^C

Services Oriented Architectures

Where have we come from - ENIAC (1946)

ENIAC Computer 

Where have we come from - Early Client-Server Computing (1960s)

IBM 704 Mainframe Computer 

Model 33 ASR Teletype 

TeleVideo 925 ASCII Terminal 

Where have we come from - Personal Computers (1970s)

IBM 5150 Personal Computer 

Apple I Personal Computer 

Now - Network computing

World Internet Hosts 1/94-1/13. Image courtesy IWS - http://www.isc.org/services/survey/ 

In a Phrase ...

The current networking computing model consists of Components Interacting with Each Other

So - We Need to Answer the Following Questions

What are components?

What does it mean to interact?

The Big Picture - Services Oriented Architectures

SOA Illustration 

The Pieces - Components

Key Components - Data

Database systems

Key Components - Data

File-based data

Key Components - Processing Services

Key Components - Clients

The Glue - Interoperability Standards / Service Interfaces

Open Geospatial Consortium Interoperability Standards

Open Geospatial Consortium (OGC) Standards

Comparison of OGC Service Models

Comparison of OGC Service Models 

OGC Web Map Services (WMS)

http://gstore.unm.edu/apps/rgis/datasets/b030ab7b-86e3-4c30-91c0-f427303d5c77/services/ogc/wms?
    VERSION=1.1.1&&
    SERVICE=WMS&
    REQUEST=GetMap&
    SRS=EPSG:4326&
    FORMAT=image/jpeg&
    STYLES=&
    LAYERS=bernalillo_tm2011&
    TRANSPARENT=TRUE&
    WIDTH=521&
    HEIGHT=200&
    bbox=-107.207,34.8404,-106.143,35.2487

WMS request result for Bernalillo County Landsat Mosaic from NM RGIS link 

OGC Web Feature Services (WFS)

OGC Web Coverage Services (WCS)

OGC Geography Markup Language (GML)

OGC KML

Implementation of the OGC Standards

Implementation information based upon OGC Implementation Statistics - Accessed 2/2014

Implementation of the OGC Standards

Implementation information based upon OGC Implementation Statistics - Accessed 2/2014

OGC Summary

The OGC web service specifications support key geospatial data access requirements

WMS

visualization of geospatial data through simple web requests

WFS

delivery of geospatial data (typically points, lines, and polygons) in a format that is usable in GIS and other applications

WCS

delivery of geospatial data (typically, but not limited to, raster data) usable in other applications

OGC Summary

The OGC data and representation standards support data exchange and higher level representation

GML

XML schema for the representation of features and associated attributes. It may be extended for use by specific communities of users (i.e. ecological data models)

KML

XML schema that supports the combination of embedded data and external data into a complete representation model that may be used by client applications to present the data through a user interface (e.g. Google Earth, WorldWind)

Module 4.1 - Interoperability Standards - WMS, KML, and XML

Outline

Extensible Markup Language - XML

XML Background

SGML Relationship with XML and HTML 

XML Design Goals

From XML 1.0 (5th ed.) Recommendation

XML Structure - Well Formed / Valid

XML Wikipedia Article

Simple XML Document

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>
</note>

XML Source (modified from original): w3schools

Simple XML Document - Prolog

1
2

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->

Includes XML Declaration and Comment

Simple XML Document - Elements

3
4
5
6
7
8

<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>
</note>

Define blocks of content

Simple XML Document - Root Element

3
4
5
6
7
8

<note>
    ...
    ...
    ...
    ...
</note>

Simple XML Document - Content Elements

4
5
6
7

    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>

Simple XML Document - Attributes

7

    <body type="instruction" >Don't forget me this weekend!</body>

Define additional information about elements as name=value pairs.

Simple XML Document - Element Content

7

    <body type="instruction" >Don't forget me this weekend!</body>

The material contained between the opening and closing tags of an Element.

Simple XML Document - Valid?

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>
</note>

Why is this XML well-formed but not valid?

There is no DTD or Schema defined for the document against which it can be validated

Common XML Constructs That Will be Encountered

Document Type Declaration (DTD) references (PROLOG)
definition, either by reference or by direct inclusion, the allowed structure of an XML document, for example:


<!DOCTYPE greeting SYSTEM "hello.dtd">

CDATA Sections
blocks of XML that contain characters that would otherwise be recognized as XML markup, for example:


<![CDATA[<greeting>Hello, world!</greeting>]]>

Common XML Constructs That Will be Encountered - cont.

XML Namespace Declarations
additional information included in elements to distinguish between duplicate element names, for example (declared in lines 1-3, used in lines 5-17):
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<root 
    xmlns:h="http://www.w3.org/TR/html4/" 
    xmlns:f="http://www.w3schools.com/furniture">

<h:table>
    <h:tr>
        <h:td>Apples</h:td>
        <h:td>Bananas</h:td>
    </h:tr>
</h:table>
<f:table>
    <f:legs>4</f:legs>
    <f:cost>300</f:cost>
    <f:width>3</f:width>
    <f:length>5</f:length>
    <f:height>4</f:height>
</f:table>
</root>

KML

KML Background

KML

an XML document, with a “.kml” extension that is directly readable and editable

KMZ

a compressed (zipped) file with a “.kmz” extension, that contains at least a KML document, but may contain other files as well

KML Capabilities

KML Content

2D and 3D KML Sample

Illustration of polygon in both planar and terrain surface 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <Placemark>
        <Polygon>
            <altitudeMode>
                clampToGround
            </altitudeMode>
            <outerBoundaryIs>
                <LinearRing>
                    <coordinates>
                        -135,78.5,300000 
                        -135,12.5,300000 
                        -45,12.5,300000 
                        -45,78.5,300000 
                        -135,78.5,300000
                    </coordinates>
                </LinearRing>
            </outerBoundaryIs>
        </Polygon>
    </Placemark>
</Document>
</kml>

KML Example

Example from: KML 2.2 Specification (fig. 6)

High-Level KML Content Types

Features

including documents, folders, placemarks, network links

Geometries

including points, linestrings, polygons, models, locations

Overlays

including ground overlays, lat-lon boxes, photo overlays, screen overlays

Styles

styles, substyles, icons, label styles

High-Level KML Content Types - cont.

Links

read, update, create, delete, change

Views

camera, look at

Time

time span, timestamp

KML Demonstration and References

New Mexico State Boundary KML File | KMZ File (from NM RGIS)

New Mexico State Boundary KML File
http://maps.google.com/maps?q=http://karlbenedict.com/GEOG485-585/lectures/examples/tl_2010_35_state10.kml

Google Code KML Documentation

OGC KML Implementation specification

OGC Web map Services - WMS

WMS - Overview

WMS GetCapabilities Request

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
WMTVER=1.0.0 R Request version
VERSION=version O O O Request version
SERVICE=WMS R R R R Service type
REQUEST=capabilities R Request name
REQUEST=GetCapabilities R R R Request name
UPDATESEQUENCE=string O O O Sequence number or string for cache control
Vendor-specific parameters O Vendor-specific parameters

R=Required / O=Optional

WMS GetMap Request (Core)

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
WMTVER=1.0.0 R Request version
VERSION=version R R R Request version.
REQUEST=map R Request name.
REQUEST=GetMap R R R Request name.
LAYERS=layer_list R R R R Comma-separated list of one or more map
layers. Optional (ver. 1.1, 1.1.1) if SLD
parameter is present.
STYLES=style_list R R R R Comma-separated list of one rendering style
per requested layer. Optional if SLD
parameter is present.
SRS=namespace:identifier R R R Spatial Reference System.
CRS=namespace:identifier R Spatial Reference System.
BBOX=minx,miny,maxx,maxy R R R R Bounding box corners (lower left, upper right)
in SRS units.
WIDTH=output_width R R R R Width in pixels of map picture.

WMS GetMap Request (Core) - cont.

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
HEIGHT=output_height R R R R Height in pixels of map picture.
FORMAT=output_format R R R R Output format of map.
TRANSPARENT=TRUE or FALSE O O O O Background transparency of map (default=FALSE).
BGCOLOR=color_value O O O O Hexadecimal red-green-blue color value for the
background color (default=0xFFFFFF).
EXCEPTIONS=exception_format O O O O The format in which exceptions are to be reported
by the WMS (default=XML).
TIME=time O O O Time value of layer desired.
ELEVATION=elevation O O O Elevation of layer desired.
Other sample dimensions O O O Values of other dimensions as appropriate.
Vendor specific parameters O O O O Vendor specific parameters

WMS GetFeatureInfo Request

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
WMTVER=1.0.0 R Request version.
VERSION=version R R R Request version.
REQUEST=feature_info R Request name.
REQUEST=GetFeatureInfo R R R Request name.
<map_request_copy> R R R R Partial copy of the Map request parameters that
generated the map for which information is desired
QUERY_LAYERS=layer_list R R R R Comma-separated list of one or more layers
to be queried.
INFO_FORMAT=output_format O O O R Return format of feature information (MIME type).
FEATURE_COUNT=number O O O O Number of features about which to return
information (default=1).

WMS GetFeatureInfo Request - cont.

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
X=pixel_column R R R X coordinate in pixels of feature
(measured from upper left corner=0)
I=pixel_column R i coordinate in pixels of feature in Map CS
Y=pixel_row R R R Y coordinate in pixels of feature
(measured from upper left corner=0)
J=pixel_row R j coordinate in pixels of feature in Map CS
EXCEPTIONS=exception_format O O O The format in which exceptions are to be
reported by the WMS (default=XML).
Vendor-specific parameters O O O Optional experimental parameters.

WMS Sample Requests - GetCapabilities

1
2
3
4

http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/services/ogc/wms?
    SERVICE=wms&
    REQUEST=GetCapabilities&
    VERSION=1.1.1

Live Link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

<?xml version='1.0' encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE WMT_MS_Capabilities SYSTEM "http://schemas.opengis.net/wms/1.1.1/
WMS_MS_Capabilities.dtd"
 [
 <!ELEMENT VendorSpecificCapabilities EMPTY>
 ]>  <!-- end of DOCTYPE declaration -->

<WMT_MS_Capabilities version="1.1.1">

<!-- MapServer version 6.0.3 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG OUTPUT=KML SUPPORTS=PROJ 
SUPPORTS=AGG SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT 
SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER 
INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE -->

<Service>
  <Name>OGC:WMS</Name>
  <Title>rgis Dataset (6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Title>
  <Abstract>WMS Service for rgis dataset State Boundary - 2010</Abstract>
        <KeywordList>
          <Keyword>rgis</Keyword>
          <Keyword> New Mexico</Keyword>
        </KeywordList>
  <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://
  gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/services/ogc/wms"/>
  <ContactInformation>
    <ContactPersonPrimary>
      <ContactPerson>GStore Support</ContactPerson>
      <ContactOrganization>Earth Data Analysis Center</ContactOrganization>
    </ContactPersonPrimary>
      <ContactPosition>technical support</ContactPosition>
    <ContactAddress>
        <AddressType>Mailing address</AddressType>
        <Address>Earth Data Analysis Center, MSC01 1110, 1 University of New Mexico</Address>
        <City>Albuquerque</City>
        <StateOrProvince>NM</StateOrProvince>
        <PostCode>87131</PostCode>
        <Country>US</Country>
    </ContactAddress>
      <ContactVoiceTelephone>(505) 277-3622</ContactVoiceTelephone>
      <ContactFacsimileTelephone>(505) 277-3614</ContactFacsimileTelephone>
  <ContactElectronicMailAddress>devteam@edac.unm.edu</ContactElectronicMailAddress>
  </ContactInformation>
  <Fees>None</Fees>
  <AccessConstraints>none</AccessConstraints>
</Service>

<Capability>
  <Request>
    <GetCapabilities>
      <Format>application/vnd.ogc.wms_xml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetCapabilities>
    <GetMap>
      <Format>image/png</Format>
      <Format>image/gif</Format>
      <Format>image/jpeg</Format>
      <Format>image/png; mode=8bit</Format>
      <Format>image/tiff</Format>
      <Format>application/vnd.google-earth.kml+xml</Format>
      <Format>application/vnd.google-earth.kmz</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetMap>
    <GetFeatureInfo>
      <Format>text/plain</Format>
      <Format>application/vnd.ogc.gml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetFeatureInfo>
    <DescribeLayer>
      <Format>text/xml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </DescribeLayer>
    <GetLegendGraphic>
      <Format>image/png</Format>
      <Format>image/gif</Format>
      <Format>image/jpeg</Format>
      <Format>image/png; mode=8bit</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetLegendGraphic>
    <GetStyles>
      <Format>text/xml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=
          "http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/
          services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetStyles>
  </Request>
  <Exception>
    <Format>application/vnd.ogc.se_xml</Format>
    <Format>application/vnd.ogc.se_inimage</Format>
    <Format>application/vnd.ogc.se_blank</Format>
  </Exception>
  <VendorSpecificCapabilities />
  <UserDefinedSymbolization SupportSLD="1" UserLayer="0" UserStyle="1" RemoteWFS="0"/>
  <Layer>
    <Name>RGIS_Dataset</Name>
    <Title>rgis Dataset (6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Title>
    <Abstract>WMS Service for rgis dataset State Boundary - 2010</Abstract>
    <KeywordList>
     <Keyword>rgis</Keyword>
     <Keyword> New Mexico</Keyword>
    </KeywordList>
    <SRS>EPSG:4269</SRS>
    <SRS>EPSG:4326</SRS>
    <SRS>EPSG:4267</SRS>
    <SRS>EPSG:26913</SRS>
    <SRS>EPSG:26912</SRS>
    <SRS>EPSG:26914</SRS>
    <SRS>EPSG:26713</SRS>
    <SRS>EPSG:26712</SRS>
    <SRS>EPSG:26714</SRS>
    <SRS>EPSG:3857</SRS>
    <LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
    <BoundingBox SRS="EPSG:4326"
                minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
    <Layer queryable="0" opaque="0" cascaded="0">
        <Name>tl_2010_35_state10</Name>
        <Title>tl_2010_35_state10</Title>
        <Abstract>State Boundary - 2010</Abstract>
        <KeywordList>
          <Keyword></Keyword>
        </KeywordList>
        <SRS>epsg:4326</SRS>
        <LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
        <BoundingBox SRS="epsg:4326"
                    minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
        <MetadataURL type="FGDC-STD-001-1998">
          <Format>text/xml</Format>
          <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/
          6ca5428a-a78c-4c82-8120-da70dc92f2cc/metadata/FGDC-STD-001-1998.xml"/>
        </MetadataURL>
    </Layer>
  </Layer>
</Capability>
</WMT_MS_Capabilities>

WMS Sample Requests - GetMap

Sample WMS response #1 

http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
    VERSION=1.1.1&
    SERVICE=WMS&
    REQUEST=GetMap&
    BBOX=-109,31,-102.9,37.1&
    LAYERS=tl_2010_35_state10&
    WIDTH=200&
    HEIGHT=200&
    SRS=EPSG:4326&
    FORMAT=image/jpeg&
    STYLES=

link

Sample WMS response #2 

http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
    VERSION=1.1.1&
    SERVICE=WMS&
    REQUEST=GetMap&
    BBOX=-109,31,-102.9,37.1&
    LAYERS=tl_2010_35_state10&
    WIDTH=300&
    HEIGHT=300&
    SRS=EPSG:4326&
    TRANSPARENT=TRUE&
    FORMAT=image/png&
    STYLES=

link

Integraton of WMS and KML

Sample WMS-KML Integration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" 
    xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
    <GroundOverlay>
        <name>RGIS Counties WMS</name>
        <Icon>
            <href>http://gstore.unm.edu/apps/rgis/datasets/107046/services/ogc/wms?
            VERSION=1.1.1&amp;SERVICE=WMS&amp;REQUEST=GetMap&amp;BBOX=-109,31,-102.9,37.1
            &amp;LAYERS=tl_2010_35_state10&amp;WIDTH=800&amp;HEIGHT=800&amp;SRS=EPSG:4326
            &amp;FORMAT=image/png&amp;STYLES=</href>
            <viewRefreshMode>onStop</viewRefreshMode>
        </Icon>
        <LatLonBox>
            <north>37.32753828398865</north>
            <south>30.86418272137246</south>
            <east>-101.3630220689848</east>
            <west>-110.6891149310152</west>
        </LatLonBox>
    </GroundOverlay>
</kml>

Sample KML File

Module 4.2 - Interoperability Standards - WFS & WCS

Outline

OGC Web Feature Service (WFS)

Background

The documents related to the OGC WFS standard are available from: http://www.opengeospatial.org/standards/wfs and all operation parameter tables presented here are based upon the OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02

From the Version 2.0.0 WFS Scope Section:

This International Standard specifies the behaviour of a service that provides transactions on and access to geographic features in a manner independent of the underlying data store. It specifies discovery operations, query operations, locking operations, transaction operations and operations to manage stored parameterized query expressions.

Discovery operations allow the service to be interrogated to determine its capabilities and to retrieve the application schema that defines the feature types that the service offers.

Query operations allow features or values of feature properties to be retrieved from the underlying data store based upon constraints, defined by the client, on feature properties.

Locking operations allow exclusive access to features for the purpose of modifying or deleting features.

Transaction operations allow features to be created, changed, replaced and deleted from the underlying data store.

Stored query operations allow clients to create, drop, list and described parameterized query expressions that are stored by the server and can be repeatedly invoked using different parameter values.

WFS Requests/Operations

These request types are submitted as part of the required REQUEST key in a KVP HTTP GET request.

GetCapabilities

service metadata (XML) that documents the types of features supported by the service and the operations supported by each feature type

DescribeFeatureType

metadata (XML) that describes the structure of supported feature types

GetPropertyValue

a request for the value(s) of a specified property for a specified featuretype

GetFeature (GetFeatureWithLock)

a request for actual features (XML, or other formats) from the service. The request may include both spatial and non-spatial query constraints

LockFeature

Feature locking operation

WFS Requests/Operations - cont.

Transaction

a request to a WFS that may create, update, or delete features

CreateStoredQuery

a request to create a named WFS query that is stored on the server for future reuse

DropStoredQuery

a request to remove a named WFS query that has previously been stored on the server

ListStoredQueries

a request to retrieve a list of named WFS queries that have been stored on the server

DescribeStoredQueries

a request for more detailed information about specific named WFS queries that are stored on the server

WFS Conformance Levels

WFS 2.0.0 Requests and their corresponding WFS Compliance Levels

Operation (REQUEST=) V 1.1.0 V 2.0.0 Simple Basic Transactional Locking
GetCapabilities
DescribeFeatureType
ListStoredQueries
DescribeStoredQueries
GetFeature
StoredQuery
GetPropertyValue
Transaction
GetFeatureWithLock
LockFeature
GetGMLObject

Request Composition

Requests submitted to a WFS may be submitted either via

HTTP GET

a request that includes all request parameters within the URL submitted to the service. Request parameters are included in the URL as “key=value” pairs (KVPs)

HTTP POST

a request where the URL consists of only the Host and path, with all other request parameters included in the body of the POST document submitted to the service. The request parameters supplied to the server are encoded as XML within the POST document.

SOAP

a request submitted as an encapsulated message within a SOAP transaction.

Servers implementing WFS may support either the HTTP GET, POST, or SOAP request model

Conceptually FeatureType = Layer

KVP for Base WFS Requests

Base request parameters for all HTTP GET KVP requests

 

VERSION is required for all operations except the GetCapabilities request

Sample GetCapabilities Requests

Sample request to USGS Framework Layer (Governmental Units) WFS Service linked from the USGS Framework Web Feature Services web page - Live Link

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    request=GetCapabilities&
    service=WFS

Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link

http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
    SERVICE=wfs&
    REQUEST=GetCapabilities&
    VERSION=1.0.0

KVP for DescribeFeatureType Request

DescribeFeatureType HTTP GET KVP request

 

Sample DescribeFeatureType Requests

USGS Framework Layer (Governmental Units) WFS Service linked from the USGS Framework Web Feature Services web page - Live Link

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    version=1.1.0&
    request=DescribeFeatureType&
    service=WFS&
    typeName=WFS_govunits:State_or_Territory_High-res

Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link

http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
    VERSION=1.0.0&
    SERVICE=wfs&
    REQUEST=DescribeFeatureType&
    TYPENAME=tl_2010_35_bg10

KVP for GetFeature Request

GetFeature HTTP GET KVP request

 

KVP for GetFeature Request - Presentation Parameters

 

KVP for GetFeature Request - Resolve Parameters

 

KVP for GetFeature Request - Ad-hoc Query Parameters

 

KVP for GetFeature Request - Stored Query Parameters

 

Sample GetFeature Requests

USGS Framework Layer (Governmental Units) WFS Service linked from the USGS Framework Web Feature Services web page - Live Link

Note: TYPENAME for VERSION=1.1.0 instead of TYPENAMES for VERSION=2.0.0

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    VERSION=1.1.0&
    REQUEST=GetFeature&
    SERVICE=WFS&
    TYPENAME=WFS_govunits:State_or_Territory_High-res

Alternative request (Live Link) that includes an OUTPUTFORMAT parameter

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    VERSION=1.1.0&
    REQUEST=GetFeature&
    SERVICE=WFS&
    TYPENAME=WFS_govunits:State_or_Territory_High-res&
    OUTPUTFORMAT=text/xml;%20subType=gml/3.1.1/profiles/gmlsf/1.0.0/0

OGC Web Coverage Services

Background

The documents related to the OGC WCS standard are available from: [http://www.opengeospatial.org/standards/wcs][wcs] with the sample parameters in the following slides based upon the OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

From the OGC WCS 2.0 Introduction

The OGC Web Coverage Service (WCS) supports electronic retrieval of geospatial data as "coverages" – that is, digital geospatial information representing space/time-varying phenomena.

This document specifies the WCS core; every implementation of a WCS shall adhere to this standard. This standard thus defines only basic requirements. Extensions to the core will define extensions to meet additional requirements, such as the response encoding. Indeed, additional extensions are required in order to completely specify a WCS for implementation.

A WCS provides access to coverage data in forms that are useful for client-side rendering, as input into scientific models, and for other clients. The WCS may be compared to the OGC Web Feature Service (WFS) and the Web Map Service (WMS). As WMS and WFS service instances, a WCS allows clients to choose portions of a server's information holdings based on spatial constraints and other query criteria.

WCS Requests/Operations

GetCapabilities

service metadata (XML) that documents the service, including brief information about the data coverages available from the service

DescribeCoverage

a request for more detailed metadata (XML) for one or more coverages listed in the output of the GetCapabilities request

GetCoverage

a request for an actual data product representing a specified coverage. The specific data formats available for delivery will vary from service to service.

Request Composition

Requests submitted to a WCS may be submitted either via the following protocols, as defined in the three extensions developed thus far for the core WCS standard.

HTTP GET

a request that includes all request parameters within the URL submitted to the service. Request parameters are included in the URL as “name=value” pairs. Extension Link

HTTP POST

a request where the URL consists of only the Host and path, with all other request parameters included in the body of the POST document submitted to the service. The request parameters supplied to the server are encoded as XML within the POST document. Extension Link

XML/SOAP

a request-response model between the client that conforms with the W3C SOAP web services protocol Extension Link

KVP for Base WCS Requests

Name Mandatory/Optional Definition Data Type
service M Identifier of the OGC service String, fixed to "WCS"
request M Request type name String, set to operation name
version M (except for GetCapabilities) Request protocol version String

Sample WCS GetCapabilities requests

NOAA Global Forecast System THREDDS catalog. Live Link

http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201403/20140301/gfs_4_20140301_1200_159.grb2?
    service=WCS&
    version=1.0.0&
    request=GetCapabilities

New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link

http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
    SERVICE=wcs&
    REQUEST=GetCapabilities&
    VERSION=1.1.2

KVP for DescribeCoverage Request

DescribeCoverage HTTP GET KVP request

 

Sample DescribeCoverage Request

NOAA Global Forecast System THREDDS catalog. Live Link

http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201403/20140301/gfs_4_20140301_1200_159.grb2?
    service=WCS&
    version=1.0.0&
    request=DescribeCoverage&
    COVERAGE=Categorical_Rain

New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link

http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
    SERVICE=wcs&
    REQUEST=DescribeCoverage&
    VERSION=1.1.2&
    COVERAGE=us_ppt_1971_2000_11

KVP for GetCoverage Request

GetCoverage HTTP GET KVP request

 

Subset Definition for GetCoverage Request

Subset definition for the GetCoverage HTTP GET KVP request

 

Example from the 2.0 specification:

http://www.myserver.org:port/path?
    service=WCS
    &version=2.0
    &request=GetCoverage
    &coverageId=C0002
    &subset=lon,http://www.opengis.net/def/crs/EPSG/0/4326(-71,47)
    &subset=lat,http://www.opengis.net/def/crs/EPSG/0/4326(-66,51)
    &subset=t,http://www.opengis.net/def/trs/ISO- 8601/0/Gregorian+UTC("2009-11-06T23:20:52Z")

Sample GetCoverage Request

New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link

http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
    SERVICE=wcs&
    REQUEST=GetCoverage&
    VERSION=1.1.2&
    COVERAGE=us_ppt_1971_2000_11&
    CRS=urn:ogc:def:crs:EPSG::4326&
    BBOX=24.0625,-125.02083333333,49.93749998965,-66.47916669008&
    FORMAT=image/tiff&
    WIDTH=2048&
    HEIGHT=905

Module 4.3 - Interoperability Standards - Desktop GIS Integration

Overview

Quantum GIS (QGIS)

ArcGIS

Common Model

Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:

Full GetCapabilities Request

NASA Earth Observations (NEO) Imagery WMS

http://neowms.sci.gsfc.nasa.gov/wms/wms?version=1.3.0&service=WMS&request=GetCapabilities

USGS Framework Services

http://frameworkwfs.usgs.gov/framework/wms/wms.cgi?SERVICE=wms&REQUEST=GetCapabilities

Base URL for GetCapabilities

NASA Earth Observations (NEO) Imagery WMS

http://neowms.sci.gsfc.nasa.gov/wms/wms?

USGS Framework Services

http://frameworkwfs.usgs.gov/framework/wms/wms.cgi?

Quantum GIS (QGIS)

QGIS uses the Base URL approach for adding WMS, WFS or WCS layers to a project.

The General Process:

  1. Add service, or select existing service
  2. Connect to the service to retrieve the information from the GetCapabilities response for the service
  3. Select layer(s)
  4. Modify settings for layer(s)
  5. Add layer(s)

QGIS OGC Documentation

QGIS - Adding Services and Layers - start

Layer selection in the QGIS Layer menu 
Layer selection from a button in the interface 

You need to know the GetCapabilities request for the service you want to add, for example one of the USGS Framework WMS services

http://frameworkwfs.usgs.gov/framework/wms/wms.cgi?
SERVICE=wms&REQUEST=GetCapabilities

determine the base URL -

http://frameworkwfs.usgs.gov/framework/wms/wms.cgi

in this case

If in doubt, check the information in the metadata

Select the layer type you would like to from "Layer" menu, or click the button in the interface to add a specific layer type.

QGIS - Adding Services and Layers - adding a service

Add a service to the list of services in the menu (if necessary - QGIS retains information about previously added services) by selecting the "New" option under the service list in the "Add Layer(s) from a Server" dialog

"Add Layer(s) from a Server" dialog 

QGIS - Adding Services and Layers - adding connection information

Add the name, base URL and any additional information about the service to the connection dialog box

Connection dialog box 

QGIS - Adding Services and Layers - connecting to and adding layers from the service

After adding the service, you can select it from the service list in the "Add Layer(s) from a Server" dialog box, connect to the service to retrieve the GetCapabilities response from the service, select the layers and other options advertised by the service through its response, and add them to your map.

"Add Layer(s) from a Server" dialog with service connection and layer selection process 

QGIS - Adding Services and Layers - the final added layer

After adding the layer, it appears as an available layer in the table of contents for your map.

QGIS map with added WMS layer in the TOC 

QGIS Demonstration with WMS, WFS and WCS Services

WMS, WFS and WCS in QGIS

Example

Screenshot of the QGIS interface with demonstration data. 

ArcGIS

Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:

This model applies to ArcGIS just as it did for Quantum GIS - the base URL is provided to the various ArcGIS components that support the addition of OGC services to the client interface.

ArcGIS OGC Support Documentation

ArcGIS WMS and WCS Configuration

The addition of OGC WMS and WCS layers to ArcMap is through the same process of

ArcGIS WMS and WCS Configuration Resources

ESRI Documentation

ESRI Documentation

ArcGIS WFS Configuration

ArcGIS WFS Configuration Resources

ESRI Documentation

ESRI Documentation

Conclusions